<template>
  <div class="certification">
    <!-- 表单开始 -->
    <el-form size="small" :inline="true" :model="list" class="demo-form-inline">
      <el-form-item>
        <el-date-picker
          v-model="value"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          align="right"
          value-format="timestamp"
          @change="each">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-select clearable v-model="list.applyType" placeholder="请选择类型">
          <el-option label="充值" value="充值"></el-option>
          <el-option label="提现" value="提现"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select clearable v-model="list.status" placeholder="请选择状态">
          <el-option label="通过" value="通过"></el-option>
          <el-option label="不通过" value="不通过"></el-option>
          <el-option label="未审核" value="未审核"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input clearable v-model="list.userId" placeholder="申请人编号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 表单结束 -->
    <!-- 表格开始 -->
    <el-table size="mini" :fit="true" :data="accountApplys" style="width: 100%;font-size: 12px;">
      <el-table-column label="序号" type="index" align="center"></el-table-column>
      <el-table-column prop="userId" label="申请人编号" align="center"></el-table-column>
      <el-table-column width="130px" prop="applyTime" label="申请时间" align="center">
        <template slot-scope="scope">
          {{scope.row.applyTime | fmtTime}}
        </template>
      </el-table-column>
      <el-table-column prop="applyType" label="变更类型" align="center"></el-table-column>
      <el-table-column prop="money" label="变更资金" align="center">
        <span style="color=#e65d6e;font-size=18px;margin-right=3px;" slot-scope="scope">￥{{scope.row.money}}元</span>
      </el-table-column>
      <el-table-column   prop="reason" label="变更原因" align="center"></el-table-column>
      <el-table-column
        prop="status"
        label="状态"
        align="center"
        filter-placement="bottom-end">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.status === '通过' ? 'success' : scope.row.status === '不通过' ? 'danger' : 'info'"
            disable-transitions>{{scope.row.status}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        align="center"
        width="100">
        <template slot-scope="scope" v-if="scope.row.status === '未审核'">
          <el-button @click="passHandler(scope.row.id)" type="text" size="small">通过</el-button>
          <el-button style="color:red;" @click="noPassHandler(scope.row.id)" type="text" size="small">不通过</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格结束 -->
    <!-- 分页开始 -->
    <div style="float:right;">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[2, 5, 10, 15,20]"
        :page-size="this.list.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <!-- 分页结束 -->
  </div>
</template>

<script>
import {mapActions, mapState} from 'vuex'
export default {
  data(){
    return {
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      value: [],
      list:{
          page:1,
          pageSize:10,
        },
      currentPage:1
    }
  },
  computed:{
    ...mapState('accountApply',['accountApplys','total'])
  },
  methods:{
    each(){
      let arr=this.value
      if(arr!==null){
        this.list.beginTime=arr[0]
        this.list.endTime=arr[1]
      }else{
        this.list.beginTime=''
        this.list.endTime=''
      }
    },
    ...mapActions('accountApply',['findAllAccountApply','checkPass','checkNoPass']),
    changeHandler(page){
      this.list.page=page;
      this.findAllAccountApply(this.list)
    },
    handleSizeChange(val) {
      this.list.pageSize=val;
      this.findAllAccountApply(this.list)
    },
    handleCurrentChange(val) {
      this.list.page=val;
      this.findAllAccountApply(this.list)
    },
    passHandler(id){
      let params={
        id
      }
      this.checkPass(params).then(res=>{
        if(res.status==200){
          this.findAllAccountApply(this.list)
          this.$message({
            type: "success",
            message: res.message
          })
        }else{
            this.$message({
            type: "error",
            message: res.message
          })
        }
      })
    },
    noPassHandler(id){
      let params={
        id
      }
      this.checkNoPass(params).then(res=>{
        if(res.status==200){
          this.findAllAccountApply(this.list)
          this.$message({
            type: "success",
            message: res.message
          })
        }else{
            this.$message({
            type: "error",
            message: res.message
          })
        }
      })
    },
    onSubmit(){
      this.findAllAccountApply(this.list)
    }
  },
  created(){
    this.findAllAccountApply(this.list)
  }
}
</script>
<style>

</style>